<template>
    <div class="Login">
        <div class="Login_title">
            <div>西宁市再生资源管理平台</div>
        </div>
        <div class="Login_box">
            <div class="Login_box_title">
                {{ title }}
            </div>

            <div class="Login_box_item" v-if="flag == 0">
                <el-input
                    v-model="form.name"
                    placeholder="请输入用户名"
                    placeholder-style="color: #00E1EB;">
                    <template #prefix>
                        <el-icon
                            class="el-input__icon"
                            style="
                                color: rgba(0, 225, 235, 0.4);
                                font-size: 0.35rem;
                            "
                            ><User
                        /></el-icon>
                    </template>
                </el-input>
            </div>

            <div class="Login_box_item" v-if="flag == 1">
                <el-input
                    v-model="form.name"
                    placeholder="请输入手机号"
                    placeholder-style="color: #00E1EB;">
                    <template #prefix>
                        <el-icon
                            class="el-input__icon"
                            style="
                                color: rgba(0, 225, 235, 0.4);
                                font-size: 0.35rem;
                            "
                            ><Iphone
                        /></el-icon>
                    </template>
                </el-input>
            </div>
            <div class="Login_box_item" v-if="flag == 1">
                <el-input
                    v-model="form.code"
                    placeholder="请输入验证码"
                    placeholder-style="color: #00E1EB;">
                    <template #prefix>
                        <el-icon
                            class="el-input__icon"
                            style="
                                color: rgba(0, 225, 235, 0.4);
                                font-size: 0.35rem;
                            "
                            ><Lock
                        /></el-icon>
                    </template>
                </el-input>

                <el-button
                    class="getcode"
                    @click="send_code"
                    :disabled="tips == '获取验证码' ? false : true"
                    >{{ tips }}</el-button
                >
            </div>

            <div class="Login_box_item">
                <el-input
                    v-model="form.password"
                    placeholder="请输入密码"
                    placeholder-style="color: #00E1EB;"
                    type="password">
                    <template #prefix>
                        <el-icon
                            class="el-input__icon"
                            style="
                                color: rgba(0, 225, 235, 0.4);
                                font-size: 0.35rem;
                            "
                            ><lock
                        /></el-icon>
                    </template>
                </el-input>
            </div>

            <el-button class="Login_box_btn" @click="submitForm">{{
                flag == 0 ? "登录" : "确定"
            }}</el-button>

            <!-- <el-button class="Login_box_btn" @click="url_ForgetPassword">{{
                flag == 0 ? "找回密码" : "返回"
            }}</el-button> -->
        </div>
    </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref, toRefs, h } from "vue";
import { ElMessage } from "element-plus";
import { Lock, User, Iphone } from "@element-plus/icons-vue";
import { post } from "../../api/request";
import { useRouter } from "vue-router";
import { loadRoutes } from '../../router/setrouter';



onMounted(() => {
   let typeuser =  localStorage.getItem('userType')||''
    if(typeuser){
        router.push({path: typeuser=='superadmin'?'/home':'/unit'});
    }
})


const router = useRouter();
let { form } = toRefs(
    reactive({
        //双向绑定表单
        form: {
            name: "",
            password: "",
            code: "",
        },
    })
);
let flag = ref(0);
let title = ref("用户登录");
let tips = ref("获取验证码");
let numbers = ref(60);
const submitForm = () => {
    if (!form.value.name) {
        ElMessage.error("请输入用户名");
        return;
    }
    if (!form.value.password) {
        ElMessage.error("请输入密码");
        return;
    }
    if (flag.value == 1 && !form.value.code) {
        //找回密码
        ElMessage.error("请输入验证码");
        return;
    }

    let send_url = ref("");
    let { obj } = toRefs(
        reactive({
            obj: {
                code: "",
                phone: "",
                pwd: "",
                name: "",
                password: "",
            },
        })
    );
    if (flag.value == 0) {
        obj.value.name = form.value.name;
        obj.value.password = form.value.password;
    }
    post({
        url: flag.value == 1 ? "/admin/Login/findPwd" : "/api/login/adminlogin",
        data: {
            ...obj.value,
        },
    }).then((res: any) => {
        //utype 2 管理员  1企业
        localStorage.setItem("userType", res.data.user.utype==2?'superadmin':'user');
        localStorage.setItem("token", res.data.token);
        localStorage.setItem("user_name", res.data.user.nickname);
        ElMessage.success("登录成功!");
        // 加载动态路由
        loadRoutes(res.data.user.utype==2?'superadmin':'user');
        setTimeout(() => {
            router.push({path: res.data.user.utype==2?'/home':'/unit'});
        }, 1000);
    });
};

const url_ForgetPassword = () => {
    if (flag.value == 1) {
        flag.value = 0;
        title.value = "用户登录";
    } else {
        flag.value = 1;
        title.value = "找回密码";
    }
};

let timer: any = null;
const send_code = () => {
    if (!form.value.name) {
        ElMessage.error("请输入手机号");
        return;
    }
    if (numbers.value == 60) {
        post({
            url: "/admin/Login/GetCode",
            data: {
                phone: form.value.name,
            },
        }).then((res: any) => {
            ElMessage.success("发送成功!");
            timer = setInterval(() => {
                numbers.value--;
                tips.value = `${numbers.value}秒后重新获取`;
                if (numbers.value == 0) {
                    clearInterval(timer);
                    numbers.value = 60;
                    tips.value = "获取验证码";
                }
                ``;
            });
        });
    }
};
</script>

<style lang="scss" scoped>
.Login {
    width: 100vw;
    height: 100vh;
    background-image: url("../../assets/img/Login_bg.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    .Login_title {
        margin-bottom: 2%;
        div {
            color: #00e1eb;
            font-size: 0.48rem !important;
        }
    }

    .Login_box {
        background: rgba(11, 161, 248, 0.1)
            url("../../assets/img/Login_box.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        padding: 0.5rem;
        height: 5rem;
        width: 5rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        .Login_box_title {
            color: #00e1eb;
            font-size: 0.32rem;
            letter-spacing: 0.07rem;
        }
        .Login_box_item {
            width: 100%;
            height: 17%;
            position: relative;
            display: flex;
            input {
                padding-left: 0.5rem;
                width: 87%;
                height: 100%;
                border: 2px solid rgba(6, 7, 7, 0.3);
                background: rgba(6, 135, 205, 0.3);
                color: rgba(0, 225, 235, 0.4);
                border-radius: 0.1rem;
            }
            input::-webkit-input-placeholder {
                /*WebKit browsers*/
                color: rgba(0, 225, 235, 0.4);
            }

            input::-moz-input-placeholder {
                /*Mozilla Firefox*/
                color: rgba(0, 225, 235, 0.4);
            }

            input::-ms-input-placeholder {
                /*Internet Explorer*/
                color: rgba(0, 225, 235, 0.4);
            }
            input:focus-visible {
                outline: none;
            }
        }
        .Login_box_btn {
            height: 15%;
            width: 100%;
            font-size: 0.22rem;
            color: #001a2b;
            background: linear-gradient(0deg, #00b9d1, #6ceefd);
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: none;
            margin-left: 0;
        }
    }
    .getcode {
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0.2rem;
        margin: auto;
        border: none;
        color: #000;
        background: linear-gradient(0deg, #00b9d1, #6ceefd);
    }
}

:deep(.el-input__wrapper) {
    border: 2px solid rgba(39, 171, 248, 0.3);
    background: rgba(6, 135, 205, 0.3);
    box-shadow: none;
}
:deep(.el-input__inner) {
    color: #fff;
    font-size: 0.22rem;
}
</style>
